/* eslint-disable react/jsx-pascal-case */
import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';

const Register = () => {

    const [form] = React.$Vant.Form.useForm()
    let navigate = useNavigate();

    // 注册
    const onFinish = async(values) => {
        let result =  await React.$api.register(values)
        if(result.code === 1) {
            React.$Vant.Toast.success({
                message: result.msg,
                onClose: () => {
                    navigate('/business/base/login')
                }
            })
        } else {
            React.$Vant.Toast.fail({
                message: result.msg
            })
        }
    }

    return (
        <>
            {/*单独引入样式 */}
            <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />
            <link rel="stylesheet" type="text/css" href="/assets/css/login.css" />
            <div className="limiter">
                <div
                    className="container-login100"
                >
                    <div className="wrap-login100 p-b-30" style={{ paddingTop: '0px' }}>

                        <div className="login100-form-avatar">
                            <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
                        </div>
                        <span className="login100-form-title p-t-20 p-b-45" style={{ height: '15px' }}
                        ></span>

                        <React.$Vant.Form
                            form={form}
                            onFinish={onFinish}
                        >
                            <React.$Vant.Form.Item
                                rules={[{ required: true, message: '请填写手机号码',validator: (_, value) => {
                                    if (/^1[3|5|6|7|8|9]\d{9}$/.test(value)) {
                                        return Promise.resolve(true)
                                    }
                                    return Promise.reject(new Error('请输入正确的手机号码'))
                                }}]}
                                name='mobile'
                                label='手机号码'
                            >
                                <React.$Vant.Input placeholder='请输入手机号码' />
                            </React.$Vant.Form.Item>
                            <React.$Vant.Form.Item
                                rules={[{ required: true, message: '请填写密码' },{
                                    min: 4,
                                    max: 16,
                                    message: '密码最少4位,最多16个字',
                                  }]}
                                name='password'
                                label='密码'
                            >
                                <React.$Vant.Input placeholder='请输入密码' type='password'/>
                            </React.$Vant.Form.Item>

                            <div className="container-login100-form-btn p-t-20">
                                <React.$Vant.Button round nativeType='submit' type='danger' block>
                                    注册
                                </React.$Vant.Button>
                            </div>
                        </React.$Vant.Form>
                        <div
                            className="container-login100-form-btn p-t-20 footerbtn"
                            style={{ paddingTop: '20px', cursor: 'pointer', color: 'white',fontSize: '20px' }}
                        >
                            <NavLink to="/business/base/login">
                                立即登陆
                            </NavLink>
                        </div>

                    </div>
                </div>
            </div>
        </>
    )
}

export default Register